<template>
  <div>
    <div class="gongneng">
      <div>
        <a-checkbox @change="dataSelectChange" class="font"
          >全选/取消
        </a-checkbox>
        <a-button type="primary" size="small" ghost @click="counterelection"
          >反选</a-button
        >
      </div>
      <div>
        <a-button type="primary" size="small" icon="plus"> 提交检查 </a-button>
      </div>
    </div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        @keyup.enter.native="searchQuery"
      >
        <a-row :gutter="24">
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目名称:" class="font">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="项目编号:" class="font">
              <a-input></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="行政区:" class="font">
              <a-select>
                <a-select-option value="0">未公布</a-select-option>
                <a-select-option value="1">已公布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <a-form-item>
              <a-select>
                <a-select-option value="0">未公布</a-select-option>
                <a-select-option value="1">已公布</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                class="cz"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      bordered
      rowKey="id"
      ref="table"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "项目名称",
          dataIndex: "pjtname",
          align: "left",
          scopedSlots: { customRender: "pjtname" },
        },
        {
          title: "项目编号",
          dataIndex: "xzq",
          align: "left",
        },
        {
          title: "净增耕地面积（公顷）",
          dataIndex: "babh",
          align: "left",
        },
        {
          title: "净增耕地中水田面积（公顷）",
          dataIndex: "stype",
          align: "left",
        },
        {
          title: "净增产能指标",
          dataIndex: "nymj",
          align: "left",
        },
        {
          title: "最近操作时间",
          dataIndex: "scmj",
          align: "left",
        },
        {
          title: "操作",
          width: 120,
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      ipagination: {
        current: 1,
        pageSize: 10, // 默认每页显示数量
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return "共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      selectedRowKeys: [],
      dataSource: [
        {
          pjtname: "五莲县果树大本营种植园(三期大榆林)",
          xzq: "20240607889922",
        },
      ],
    };
  },
  methods: {
    //表格复选框事件
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    //全选/取消事件
    dataSelectChange(e) {
      if (this.dataSource.length != 0) {
        var arr = [];
        this.dataSource.map((item, index) => {
          arr.push(index);
        });
        this.selectedRowKeys = e.target.checked == true ? arr : [];
      }
    },
    //反选
    counterelection() {
      this.iscont = !this.iscont;
      if (this.dataSource.length != 0) {
        const arr = [];
        this.dataSource.map((item, index) => {
          arr.push(index);
        });
        this.selectedRowKeys = this.iscont == true ? arr : [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.font {
  font-weight: 700;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  color: #4d5259;
}
.gongneng {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.cz {
  margin-left: 8px;
}
.table-page-search-wrapper{
    margin-top: 10px;
}
</style>